<template>
  <el-drawer
    title="消息"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose">

    <el-card class="box-card" v-for="item in messageList" :key="item._id">
      <div slot="header" class="clearfix">
        <span>新的订单</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toDetails(item._id)">查看详情
        </el-button>
      </div>
      <div class="content">
        <div class="PickUpNum">{{item.pickUpNum}}</div>
        <div class="tableNum">桌号:{{item.tableNum}}</div>
        <div class="goods">商品数量:{{item.num}}</div>
      </div>
    </el-card>

    <div style="text-align: center" v-if="messageList.length === 0">暂无消息</div>

  </el-drawer>

</template>

<script>

  export default {
    name: "Message",
    props: ['messageList'],
    data() {
      return {
        drawer: false,
        direction: 'rtl'
      }
    },
    methods: {
      toDetails(id) {
        this.$router.push(`order_details?id=${id}`)
        this.handleClose()
      },
      handleClose() {
        this.drawer = false
      },
      show() {
        this.drawer = true
      }
    },
    created() {

    }
  }
</script>

<style lang="scss">
  .el-drawer.rtl {
    overflow: scroll;
  }

  .el-drawer {
    width: 20% !important;
    background: #f2f6fc;

    .el-drawer__header {
      background: white;
      padding-bottom: 20px;
    }

    .el-drawer__body {
      padding: 0 20px;

      .box-card {
        margin-top: 20px;

        .content {
          div {
            text-align: center;
            font-size: 15px;
          }

          .PickUpNum {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>
